<template>
	<view class="modele_box">
		<view style="width: 100%;height: 100rpx;"> </view>
		<view class="navbar flex_dq">
			<view class="navbar_box" v-for="(item,index) in navberlist" :key="item.type" @click="changeNav(item.type)">
				<text :class="item.type == types?'active':''">{{item.name}}</text>
			</view>
			<image class="fhss" src="../../static/icon/i_bss.png" @click="goSearch"></image>
		</view>
		<view class="" v-show="types == 1">
			<view class="selsect1 marleft " @click="showScreen = true ,isSwitch = false">
				<text>{{screeNname}}</text>
				<uni-icons type="right" color="#ffffff" size="15"></uni-icons>
			</view>
			<view class="hall " v-for="(item,index) in hatchList" :key="index"
				@click="goDetails(item.id,item.hatch_goods_pid)">
				<view class="hall_top flex_dq ">
					<view class="tag" v-if="item.hatch_goods_market_condition.length!=0">
						<image :src="item.hatch_goods_market_condition.region_name" mode="aspectFill"></image>
					</view>
					<view class="hall_top_l">
						<image :src="item.img" mode="aspectFill"></image>
						<text class="hall_state" v-if="item.status == 1">{{item.buy_start_time}}</text>
						<text class="hall_state" v-if="item.status == 2&& item.stock>0">挂售中</text>
						<text class="hall_state" v-if="item.status == 3">已结束</text>
						<text class="hall_state" v-if="item.status==2 && item.stock==0">已售罄</text>
					</view>
					<view class="hall_top_r ">
						<view class=" flex_ld">
							<text>{{item.goods_name}}</text>
						</view>
						<view class=" flex_ld">
							<text>当前价格</text>
							<text>{{item.price}}</text>
						</view>
						<view class=" flex_ld">
							<text>孵化周期</text>
							<text>{{item.incubation_cycle}} 天</text>
						</view>
						<view class=" flex_ld">
							<text>孵化上限</text>
							<text>{{item.hold_max_num}}份</text>
						</view>
					</view>
				</view>
				<view class="hall_top_b flex_ld">
					<text>挂单数量:{{item.stock}}</text>
					<view class=" flex_dq">
						<text>距离下轮拆配还有({{item.dismantling_day}})天</text>
						<u-icon name="arrow-right" color="#333" size="14"></u-icon>
					</view>
				</view>
			</view>
			<noDatas  :xxxList="hatchList" :status="status1"></noDatas>
		</view>
		<!-- 自由市场 -->
		<view class="commodity_box flex_Z" v-show="types==2">
			<view class="screen flex_ld">
				<view class="selsect2 flex_c" @click="isSwitch = !isSwitch">
					<text>{{arrayValue1}}</text>
					<image :class="isSwitch?'flipOver':''" src="../../static/icon/i_xial.png" mode=""></image>
				</view>
				<view class="shuaixuan flex_Z" v-show="isSwitch">
					<text v-for="(item,index) in freeDownList" :key="index" @click="isSelect2(item)">{{item.name}}</text>
				</view>
			</view>
			<view class="commodity ">
				<view class="commodity_sell flex_Z" v-for="(item,index) in freeList" :key="index"
					@click="goDetails2(item.id,item.goods_id)">
					<image :src="item.img" mode="aspectFill"></image>
					<text>{{item.goods_name}}</text>
					<view class="hang flex_dq">
						<view class="hang_l  flex_c">
							<text>挂单</text>
						</view>
						<text> x{{item.sotck}}</text>
					</view>
					<view class="sign_box flex_ld">
						<view class="money_a flex_dq">
							<image src="../../static/icon/i_money.png" mode=""></image>
							<text>{{item.price}}</text>
							<text style="font-size: 18rpx;margin-left: 4rpx;">起</text>
						</view>
					</view>
				</view>
			</view>
			<noDatas  :xxxList="freeList" :status="status2"></noDatas>
		</view>
		<view class="commodity_box flex_Z" v-show="types==3">
			<view class="commodity martop">
				<view class="commodity_sell flex_Z" v-for="(item,index) in proplist" :key="item.id"
					@click="goDetails3(item.id,item.prop_id)">
					<image :src="item.img" mode="aspectFill"></image>
					<text>{{item.prop_name}}</text>
					<view class="hang flex_dq">
						<view class="hang_l  flex_c">
							<text>挂单</text>
						</view>
						<text> x{{item.sotck}}</text>
					</view>
					<view class="sign_box flex_ld">
						<view class="money_a flex_dq">
							<image src="../../static/icon/i_money.png" mode=""></image>
							<text>{{item.price}}</text>
							<text style="font-size: 18rpx;margin-left: 4rpx;">起</text>
						</view>
					</view>
				</view>
			</view>
			<noDatas  :xxxList="proplist" :status="status3"></noDatas>
		</view>
		
		<!-- 积分仿 -->
		<view class="commodity_box flex_Z" v-show="types==4">
			<view class="screen flex_ld">
				<view class="selsect2 flex_c" @click="isSwitch = !isSwitch">
					<text>{{arrayValue2}}</text>
					<image :class="isSwitch?'flipOver':''" src="../../static/icon/i_xial.png" mode=""></image>
				</view>
				<view class="shuaixuan flex_Z" v-show="isSwitch">
					<text v-for="(item,index) in integralDownList" :key="index" @click="isSelect4(item)">{{item.name}}</text>
				</view>
			</view>
			<view class="commodity ">
				<view class="commodity_sell flex_Z" v-for="(item,index) in integralList" :key="index"
					@click="goDetails4()">
					<image :src="item.consignment_image" mode="aspectFill"></image>
					<text>{{item.consignment_name}}</text>
					<view class="hang flex_dq">
						<view class="hang_l  flex_c">
							<text>挂单</text>
						</view>
						<text> x{{item.rent_number}}</text>
					</view>
					<view class="sign_box flex_ld">
						<view class="money_a flex_dq">
							<image src="../../static/icon/i_money.png" mode=""></image>
							<text>{{item.rent_min_price}}</text>
							<text style="font-size: 18rpx;margin-left: 4rpx;">起</text>
						</view>
					</view>
				</view>
			</view>
			<noDatas  :xxxList="integralList" :status="status4"></noDatas>
		</view>
		<view class="empty2"></view>
		
		<u-popup :show="showScreen" @close="showScreen = false" bgColor="transparent" closeable>
			<view class="popup_type flex_ZC">
				<text>选择发行方</text>
				<view class="xuan flex_left">
					<text :class="item.id == brandId? 'actives':''" v-for="(item,index) in typeList" :key="index"
						@click="isType(item)">{{item.name}}</text>
				</view>
				<text class="submit" @click="isConfirm">确定</text>
			</view>
		</u-popup>
		<!-- #ifdef H5 -->
		<view class="toBottom"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		userRanking
	} from '../../api/index.js'
	import {
		marketGroup,
		brandAll,
		hatchMarketGroup,
		propmarketGroup,
		integralMarketGroup
	} from "../../api/store.js";
	import {memberBalance} from "../../api/index.js";
	export default {
		data() {
			return {
				page1: 1,
				page2: 1,
				page3: 1,
				page4: 1,
				size: 10,
				types: 1,
				brandId: 0, //品牌id
				jfType:1,//积分坊类型
				xsPay:'',//新生支付
				sdPay:'',//杉德支付
				transfer: '', //暂存
				temporary:'',//暂存字段
				screeNname:'全部',//筛选值
				arrayValue1: '默认', //默认
				arrayValue2: '新生专区', //默认
				choiceType: 'create_time desc', //筛选方式
				status1: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				status2: 'loadmore',
				status3: 'loadmore',
				status4: 'loadmore',
				showScreen: false, //筛选弹窗
				isSwitch: false, //下拉弹窗
				typeList: [],
				hatchList: [],
				freeList: [],
				proplist: [],
				integralList:[],
				navberlist: [{
						type: 1,
						name: '孵化坊'
					},
					{
						type: 2,
						name: '自由坊'
					},
					{
						type: 3,
						name: '道具坊'
					}
				],
				freeDownList: [{
						id: 0,
						name: '默认',
						type: '0'
					},{
						id: 1,
						name: '最新上架',
						type: 'create_time desc'
					},
					{
						id: 2,
						name: '价格升序',
						type: 'price asc'
					},
					{
						id: 3,
						name: '价格降序',
						type: 'price desc'
					},
				],
				integralDownList: [{
						type: 1,
						name: '新生专区',
					},
					{
						type: 2,
						name: '杉德专区',
					},
				],
			}
		},
		onLoad() {
			this.isBrandAll()
		},
		onShow() {
			if (uni.getStorageSync("stype")) {
				this.types = uni.getStorageSync("stype")
				uni.removeStorageSync("stype")
			}
			let tokens = uni.getStorageSync('token');
			if (tokens) {
				if (this.types == 1) {
					if (this.status1 != 'nomore') {
						this.initHatchList()
					}
				}else if (this.types == 2) {
					if (this.status2 != 'nomore') {
						this.initList()
					}
				}else if (this.types == 3) {
					if (this.status3 != 'nomore') {
						this.getlist()
					}
				}else if (this.types == 4) {
					if (this.status4 != 'nomore') {
						// this.getuser()
						this.integralInit()
					}
				}
			}
		},
		methods: {
			// 用户信息
			getuser() {
				memberBalance().then(res => {
					console.log(res)
					if (res.code == 1) {
						this.xsPay = res.data.open_xs
						this.sdPay = res.data.open_sd
					}
				})
			},
			// 品牌方
			isBrandAll() {
				brandAll().then(res => {
					// console.log(33333333, res)
					this.typeList = res.data
					let fullAutoStop = {
						name: '全部',
						id: '0'
					}
					this.typeList.unshift(fullAutoStop)
					// console.log(this.typeList);
				})
			},
			// 初始化孵化坊列表
			initHatchList() {
				let data = {
					page: this.page1,
					keywords: '',
					brand_id: this.brandId, //发行方
					// order_by: this.choiceType, //排序方式
				};
				hatchMarketGroup(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data;
						this.hatchList = this.page1 == 1 ? list : this.hatchList.concat(list);
						if (list.length < this.size) this.status1 = 'nomore';
						else this.status1 = 'loading';
					}
				})
			},
			// 初始化自由坊列表
			initList() {
				let data = {
					page: this.page2,
					brand_id: 0, //发行方
					order_by: this.choiceType, //排序方式
				};
				marketGroup(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.freeList = this.page2 == 1 ? list : this.freeList.concat(list);
						if (list.length < this.size) this.status2 = 'nomore';
						else this.status2 = 'loading';
					}
				})
			},
			// 初始化道具坊列表
			getlist() {
				let data = {
					keywords:'',
					page: this.page3
				}
				propmarketGroup(data).then(res => {
					// console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.proplist = this.page3 == 1 ? list : this.proplist.concat(list);
						if (list.length < this.size) this.status3 = 'nomore';
						else this.status3 = 'loading';
					}
				})
			},
			// 初始化积分坊列表
			integralInit() {
				let data = {
					page: this.page4,
					type:this.jfType,
				};
				integralMarketGroup(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.integralList = this.page4 == 1 ? list : this.integralList.concat(list);
						if (list.length < this.size) this.status4 = 'nomore';
						else this.status4 = 'loading';
					}
				})
			},
			// 切换navbar
			changeNav(type) {
				console.log(type);
				this.types = type
				this.brandId = ''
				this.choiceType = ''
				this.isSwitch = false
				if (type == 1) {
					if (this.status1 != 'nomore') {
						this.initHatchList()
					}
				}else if (type == 2) {
					if (this.status2 != 'nomore') {
						this.initList()
					}
				}else if (type == 3) {
					if (this.status3 != 'nomore') {
						this.getlist()
					}
				}else if (type == 4) {
					this.getuser()
					if (this.status4 != 'nomore') {
						this.integralInit()
					}
				}
			},
			// 自由坊下拉选择
			isSelect2(e) {
				this.arrayValue1 = e.name
				this.choiceType = e.type
				this.isSwitch = false
				this.page2 == 1
				this.freeList = []
				this.initList()
			},
			// 积分坊下拉选择
			isSelect4(e) {
				this.arrayValue2 = e.name
				this.jfType = e.type
				this.isSwitch = false
				this.page4 == 1
				this.integralList = []
				this.integralInit()
			},
			goSearch() {
				uni.navigateTo({
					url: '/pagesMy/mallCenter/searchHall'
				})
			},
			// 选下拉类型
			isType(item) {
				console.log(item);
				this.brandId = item.id
				this.temporary = item.name
				console.log(this.brandId);
			},
			// 确定
			isConfirm() {
				this.showScreen = false
				this.page1 = 1
				this.hatchList = []
				this.screeNname = this.temporary
				this.initHatchList()
			},
			goDetails(id, pid) {
				uni.navigateTo({
					url: '/pagesMy/mallCenter/incubationDetails?id=' + id + '&pid=' + pid
				})
			},
			// 商品详情
			goDetails2(id, goodsId) {
				uni.navigateTo({
					url: '/pagesMy/mallCenter/freeMarketDetails?id=' + id + '&goodsId=' + goodsId
				})
			},
			goDetails3(id, goodsId) {
				uni.navigateTo({
					url: '/pagesMy/mallCenter/propDetails?id=' + id + '&goodsId=' + goodsId
				})
			},
			goDetails4(){
				uni.navigateTo({
					url: '/pagesMy/mallCenter/integralDetails?type=' + this.jfType
				})
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				if (that.types == 1) {
					that.page1 = 1
					that.hatchList = []
					that.brandId = ''
					that.isBrandAll()
					that.initHatchList()
				} else if (that.types == 2) {
					that.page2 = 1
					that.freeList = []
					that.choiceType = ''
					that.initList()
				} else  if (that.types == 3){
					that.page3 = 1
					that.proplist = []
					that.getlist()
				} else  if (that.types == 4){
					that.page4 = 1
					that.jfType= 1
					that.arrayValue2 = '新生专区'
					that.integralList = []
					that.integralInit()
				}
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.types == 1) {
				if (this.status1 != 'nomore') {
					this.page1 = this.page1 + 1
					this.initHatchList()
				}
			}else if (this.types == 2) {
				if (this.status2 != 'nomore') {
					this.page2 = this.page2 + 1
					this.initList()
				}
			}else if (this.types == 3) {
				if (this.status3 != 'nomore') {
					this.page3 = this.page3 + 1
					this.getlist()
				}
			}else if (this.types == 4) {
				if (this.status4 != 'nomore') {
					this.page4 = this.page4 + 1
					this.integralInit()
				}
			}
		}
	}
</script>

<style>
	page {
		background: #E0DDDA;
	}
</style>

<style scoped lang="scss">
	.modele_box {
		position: relative;
		width: 100%;
		height: 100vh;
		background: url('../../static/image/bg3.png') no-repeat;
		background-size: 100% 196rpx;
		z-index: 3;
	}

	.navbar {
		position: relative;
		width: 690rpx;
		margin: 0 auto 30rpx;
	}

	.fhss {
		position: absolute;
		top: 6rpx;
		right: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.navbar_box>text {
		font-size: 36rpx;
		color: #999999;
		margin-right: 42rpx;
	}

	.active {
		color: #8C7554 !important;
		font-weight: 700;
	}

	.screen1 {
		width: 180rpx;
		position: relative;
		font-size: 30rpx;
		color: #ffffff;
		background: #B8A185;
		padding: 10rpx 20rpx;
	}

	.screen1>text {
		text-align: center;
		font-size: 24rpx;
		color: #ffffff;
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
	}
	.screen1>image {
		width: 24rpx;
		height: 18rpx;
		margin-left: 8rpx;
	}
	

	.screen {
		position: relative;
		width: 100%;
		font-size: 30rpx;
		color: #ffffff;
		padding-bottom: 20rpx;
	}

	.screen>text {
		width: 82rpx;
		height: 42rpx;
		line-height: 42rpx;
		text-align: center;
		background: #B8A185;
		font-size: 24rpx;
		color: #ffffff;
		border-radius: 8rpx;
		padding: 4rpx 8rpx;
	}
	.selsect1 {
		width: 190rpx;
		font-size: 24rpx;
		color: #ffffff;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border-radius: 10rpx;
		background: #B8A185;
	}

	.selsect1>image {
		width: 24rpx;
		height: 18rpx;
		margin-left: 8rpx;
	}
	.marleft{
		margin-left: 32rpx;
	}
	.selsect2 {
		font-size: 24rpx;
		color: #ffffff;
		width: 170rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border-radius: 10rpx;
		background: #B8A185;
	}
	
	.selsect2>image {
		width: 24rpx;
		height: 18rpx;
		margin-left: 8rpx;
	}
	.flipOver{
		transform: rotate(180deg);
	}
	.shuaixuan {
		position: absolute;
		top: 46rpx;
		left: 0rpx;
		width: 170rpx;
		margin-top: 4rpx;
		z-index: 999;
	}

	.shuaixuan>text {
		padding: 16rpx 0;
		font-size: 24rpx;
		color: #ffffff;
		background: #B8A185;
		padding-left: 32rpx;
		border-bottom: 1rpx solid #ffffff30;
	}

	.hall {
		width: 690rpx;
		background: #F2F2F2;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 24rpx auto 40rpx;
		border-radius: 20rpx;
		position: relative;
	}

	.mart {
		margin-top: 50rpx;
	}

	.hall_top {
		border-bottom: 1rpx dashed #D8D8D850;
	}

	.tag {
		width: 72rpx;
		height: 72rpx;
		position: absolute;
		top: 0;
		right: 0;

		font-size: 26rpx;
		color: #FFFFFF;
		z-index: 9;
		text-align: center;

		>text {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 9;
		}
		>image {
			position: absolute;
			top: 26rpx;
			left: 10rpx;
			width: 50rpx;
			height: 50rpx;
		}
	}

	.hall_top_l {
		position: relative;
		margin-top: 24rpx;
		margin: 28rpx;
	}

	.hall_state {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 24rpx;
		color: #ffffff;
		padding: 4rpx 8rpx;
		background: #00000090;
		border-radius: 0 0 10rpx 0;
		/* background: rgba(255, 255, 255 0.1); */
		/* backdrop-filter: blur(1px) */
		border-top-left-radius: 20rpx;
	}

	.hall_top_l>image {
		width: 178rpx;
		height: 178rpx;
		border-radius: 16rpx;
	}

	.hall_top_r {
		width: 430rpx;
		font-size: 26rpx;
		color: #333;
	}

	.hall_top_r>view {
		margin: 10rpx 0;
	}

	.hall_top_b {
		color: #333;
		font-size: 26rpx;
		padding: 28rpx 30rpx;
		/* background: pink; */
	}

	.popup_type {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 600rpx;
		background: #E0DDDA;
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		padding-bottom: 50rpx;
	}

	.popup_type>text:nth-child(1) {
		width: 100%;
		font-size: 36rpx;
		color: #333333;
		margin-left: 30rpx;
		margin-top: 50rpx;
		text-align: center;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #ffffff30;
	}

	.xuan {
		width: 100%;
		margin: 30rpx 0 30rpx;
	}

	.xuan>text {
		min-width: 134rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 20rpx;
		color: #525252;
		font-size: 24rpx;
		margin-left: 30rpx;
		border: 1rpx solid #a69783;
		margin-top: 20rpx;
		padding: 0 10rpx;
	}

	.actives {
		color: #ffffff !important;
		border: 1rpx solid #B8A185 !important;
		background: #B8A185 !important;
	}

	.submit {
		position: absolute;
		/* #ifdef APP */
		bottom: 50rpx;
		/* #endif */
		/* #ifdef H5 */
		bottom: 150rpx;
		/* #endif */
		width: 690rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 36rpx;
		color: #ffffff;
		text-align: center;
		background: linear-gradient(274deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 40rpx;
	}

	.commodity_box {
		width: 92%;
		margin: 0 auto 30rpx;
		position: relative;
	}

	.commodity {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}
	.martop{
		margin-top: 30rpx;
	}

	.commodity {
		z-index: 9;
	}

	.commodity_sell {
		position: relative;
		width: 336rpx;
		background: #B8A185;
		border: 2rpx solid #B8A185;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		margin-bottom: 40rpx;
	}

	.commodity_sell>image {
		width: 100%;
		height: 382rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.commodity_sell>text {
		margin: 16rpx;
		color: #ffffff;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.hang {
		position: absolute;
		top: 30rpx;
		left: 0;
		background: #00000090;
		border-radius: 0rpx 38rpx 38rpx 0rpx;
		font-size: 22rpx;
		padding: 10rpx 20rpx;
		color: #ffffff;

	}

	.hang>text {
		margin-left: 10rpx;
	}

	.money_a {
		color: #ffffff;
		font-size: 32rpx;
		font-family: iconfont;
		margin-right: 10rpx;
	}

	.money_a>image {
		width: 30rpx;
		height: 30rpx;
		margin: 0 10rpx;
	}
</style>